<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit|ie-stand|ie-comp">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>{{title}}</title>
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,400,300,400italic,500"> -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="http://mengdu.github.io/blog/css/github-markdown.css">
<link rel="stylesheet" href="assets/css/atom-one-light.css">
<style>
  .article .article-header{
    margin-bottom: 10px;
    border-bottom: solid 1px #DFE7F1;
  }
  .article .article-header .article-title{
    font-size: 3rem;
  }
  .article-right{
    position: relative;
  }
  .markdown-body pre{
    background: #F6F8FA;
    border-radius: 3px;
    border: solid 1px #f0f1f3;
  }
  .markdown-body blockquote{
    padding: 1em;
    background: #F6F6F6;
    border-left: solid 2px #5DADFA;
    font-size: 1rem;
  }
  .markdown-menu,
  .markdown-menu ul{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .markdown-menu li{
    list-style: none;
    padding: 0;
  }
  .markdown-menu li a{
    padding: 6px 0 6px 12px;
    display: block;
    color: #444;
    font-size: 1rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-left: solid 1px transparent;
  }
  .markdown-menu li.active>a{
    border-left: solid 1px #8624CE;
    background: #f2f2f2;
    font-weight: bold;
  }
  .markdown-menu li a:hover{
    color: #444;
    background: #f2f2f2;
    border-left: solid 1px #5DADFA;
    text-decoration: none;
  }
  .markdown-menu-box{
    width: 100%;
    max-width: 240px;
  }
  .markdown-menu-box.affix{
    top: 15px;
    position: fixed;
    overflow: auto;
    max-height: 95%;
  }
  @media (max-width: 996px) {
    .hidden-xs{
        display: none;
    }
  }
</style>
</head>
<body>


<!-- content -->
<div class="container my-container">
  <div class="row">
    <div class="col-md-9">
      <!-- 文章 -->
      <div class="box">
        <div class="box-content">
          <div class="article">
            <div class="article-header">
              <h1 class="article-title">{{title}}</h1>
              <!-- 用户信息 -->
              <!-- <div class="avatar-box">
                <a href="#"><img src="imgs/user1-128x128.jpg" alt="" class="avatar-img"></a>
                <a href="#" class="avatar-name">微社区</a>
                <span class="avatar-sign">专注互联网娱乐开发</span>
                <span class="avatar-annotation">刚刚</span>
              </div> -->
            </div>
            <div class="article-content markdown-body">
              {{{markdown}}}
            </div>
          </div>
        </div>
      </div>
    
      <!-- <div class="block-title">
        <div class="block-line"></div>
        <div class="block-text">
          <strong>评论区</strong>
        </div>
      </div>
      
      <div class="block-title block-text-center">
        <div class="block-line"></div>
        <div class="block-text">
          <strong>评论区</strong>
        </div>
      </div>
      
      <div class="block-title block-text-right">
        <div class="block-line"></div>
        <div class="block-text">
          <strong>评论区</strong>
        </div>
      </div> -->
    </div>
    <div class="col-md-3 hidden-xs article-right">

      <div class="box markdown-menu-box" id="menu" data-spy="affix" data-offset-top="110">
        <div class="box-header no-border">
          <h2 class="box-title">目录</h2>
        </div>
        <div class="box-body nav markdown-menu">
          {{{toc}}}
        </div>
      </div>

    </div>
  </div>
</div>




<footer class="footer">
  <p class="copyright"><img src="assets/imgs/logo.png" class="logo" alt="">&copy;微社区版权所有&nbsp;make by <a href="https://mengdu.github.io" target="_blank">@lanyue</a></p>
</footer>

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $('body').scrollspy({target: '#menu'});
</script>
</body>
</html>